<template>
    <el-header>
        <div class="flex-between header">
            <div class="flex-center">
                <el-image style="width: 35px; height: 35px" :src="require('@/assets/logo.png')" fit="cover" />
                <el-link style="margin-top:4px" type="primary" :underline="false" href="/">MontUI</el-link>
                <el-tag style="margin-left:10px" size="mini">Beta</el-tag>
            </div>
            <div class="flex-center">
                <ul class="flex-center header-nav-box">
                    <li 
                    v-for="item in navList" 
                    :key="item.name"
                    @click="goLink(item.path)"
                    class="header-nav"
                    :class="{'nav-actived':currrentPath===item.name}">
                    {{item.title}}
                    </li>
                </ul>
               
            </div>
        </div>
      
    </el-header>
</template>

<script>
import { ref, reactive, onMounted, watchEffect, toRefs, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
export default {
    name: 'Header',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        const router = useRouter();
        let data = reactive({
            navList:[
                { path:'/home', title:'首页', name:'home' },
                { path:'/doc', title:'文档', name:'doc' },
                { path:'/component', title:'组件', name:'component' }
                // { name:'gitee', title:'Gitee' }
            ]
        });

        let methods = {
            goLink (value)
            {
                // if(value === 'gitee')
                // {
                //     return window.open('https://gitee.com/zhong_wei_peng/zcloud', '_blank');
                // // }
                // // data.drawerVisible = false;
                router.push({path:value});
            }
        };

        let currrentPath = computed(() => 
        {
            let path = window.location.href.split('#')[1].split('/')[1];
            return path;
        });

      
        onMounted(() => 
        {
            console.log(window.location.href.split('#')[1].split('/'));
        });

        onUnmounted(() => 
        {
            
        });

        return {
            ...toRefs(data),
            ...methods,
            currrentPath
        };
    }
};

</script>
<style lang='scss' scoped>
.el-header {
    position: sticky;
    top: 0;
    z-index: 2100;
    min-width: 900px;
    background-color: $white;
    // @include box-shadow(0px,0px,6px,rgb(94,94,94));
    @include box-shadow(0,2px,6px, rgba(0,0,0), 0.05);
    

    .header {
        width: 100%;
        height: 100%;

        a {
            font-size: 18px;
            font-weight: 550;
            margin-left: 10px;
        }

        .header-nav-box {
            font-size: $small;
            
            .header-nav {
                cursor: pointer;
                width: 50px;
                text-align: center;
                padding: 10px;
                margin: 0 3px;
                border-radius: 5px;
                background-color: transparent;
                transition: all .3s;

                &:hover {
                    // background-color: rgba($PrimaryColor,.3);
                    color:rgba(64, 158, 255, 1);
                }
            }

            .nav-actived {
                // background-color: rgba($PrimaryColor,.3);
                background-color: rgba(64, 158, 255, .2);
                color: #409eff;
            }
        }

        .header-right {
            padding-right: 10px;
            span {
                cursor: pointer;
                margin: 0 5px 0 20px;

                i {
                    top: 2px;
                }
            }

        }

        
    }


}


</style>
